<template>
  <div class="printForm">
    <div class="area-header">
      <span class="area-header-title">{{ $t('申请单') }}</span>
    </div>
    <table class="printTable">
      <tr>
        <td class="tit">{{ $t('申请标题') }}</td>
        <td colspan="3">{{ form.actTitle }}</td>
      </tr>
      <tr>
        <td class="tit">{{ $t('申请人') }}</td>
        <td>
          <UserSelect
            v-model="form.applicant"
          />
        </td>
        <td class="tit">{{ $t('申请时间') }}</td>
        <td>
          {{ parseTime(form.applicationTime) }}
        </td>
      </tr>
      <tr>
        <td class="tit">{{ $t('部门名称') }}</td>
        <td>
          {{ form.deptName }}
        </td>

        <td class="tit">{{ $t('联系电话') }}</td>
        <td>
          {{ form.phone }}
        </td>
      </tr>
      <tr>
        <td class="tit">{{ $t('岗位/职务') }}</td>
        <td>
          {{ form.postNames }}
        </td>
        <td class="tit">{{ $t('通知人员') }}</td>
        <td>
          <span v-for="v in users" :key="v"> {{ v }},</span>
        </td>

      </tr>

      <tr>
        <td class="tit">{{ $t('休假时间') }}</td>
        <td>
          {{ parseTime(form.startDate, '{y}-{m}-{d} {h}:{i}') }} / {{ parseTime(form.endDate, '{y}-{m}-{d} {h}:{i}') }}
        </td>
        <td class="tit">{{ $t('工作交接人') }}</td>
        <td>
          <UserSelect v-model="form.workUser" />
        </td>
      </tr>
      <tr>
        <td class="tit">{{ $t('申请休假天数') }}</td>
        <td>
          {{ form.vacationDay }}
        </td>
        <td class="tit">{{ $t('去除节假日休假天数') }}</td>
        <td>
          {{ form.removeHoliday }}
        </td>
      </tr>
      <tr>
        <td class="tit">{{ $t('备注') }}</td>
        <td colspan="3">
          {{ form.remark }}
        </td>
      </tr>
    </table>

    <div v-if="form.oaVacationDetails && form.oaVacationDetails.length > 0">
      <div class="area-header">
        <span class="area-header-title">{{ $t('休假明细') }}</span>
      </div>
      <table class="previewTable">
        <thead>
          <th>{{ $t('申请休假类型') }}</th>
          <th>{{ $t('实际剩余天数') }}</th>
          <th>{{ $t('本次申请天数') }}</th>
        </thead>
        <tbody>
          <tr v-for="(v, ind) in form.oaVacationDetails" :key="ind">
            <td>
              {{ vacationFormat(v.vacationType) }}
            </td>
            <td>{{ v.remainDay }}</td>
            <td>{{ v.vacationDay }}</td>
          </tr>
        </tbody>
      </table>

    </div>

    <FileView :list.sync="form.fileList" data-type="oa_vacation" />

  </div>
</template>

<script>
import { getOaVacation } from '@/api/oa/vacation/vacation/oaVacation'
import { findAll } from '@/api/oa/vacation/type/oaVacationType'
import { getUserProfile } from '@/api/system/user'
export default {
  data() {
    return {
      // 表单参数
      form: {
        oaVacationDetails: []
      },
      // 遮罩层
      loading: false,
      // 休假类型
      vacationTypeOptions: [],
      users: []
    }
  },
  created() {
    this.$bus.$emit('async_done')
    findAll().then((response) => {
      this.vacationTypeOptions = response.data
    })
  },
  methods: {
    vacationFormat(row) {
      if (row) {
        const v = this.vacationTypeOptions.filter(item => item.id === row)
        if (v && v.length > 0) {
          return v[0].type
        }
      }
    },
    workUsers(row) {
      if (row && row.length > 0) {
        this.users = []
        const userList = this.$store.state.user.userList
        row.forEach(v => {
          const val = userList.filter(item => item.id === v)
          if (val && val.length > 0) {
            this.users.push(val[0].label)
          }
        })
      }
    },
    // 初始化数据
    init(data) {
      this.loading = true
      if (data != null && data.id !== undefined) {
        getOaVacation(data.id).then((response) => {
          this.form = response.data
          this.workUsers(this.form.noticeUsers)
          this.loading = false
        })
      } else {
        getUserProfile().then((response) => {
          this.form.applicant = response.data.id
          this.form.deptName = response.data.dept.deptName
          this.form.deptId = response.data.dept.id
          this.form.phone = response.data.phonenumber
          this.loading = false
        })
      }
    }
  }
}
</script>
